<template>
  <div class="home">
    <div class="top">
      <Header :tarbar="tarbar" @changeNewData="changeNewData"></Header>
    </div>
    <div class="meddle wrapper" ref="wrapper">
      <div>
        <div v-for="(item, index) in newData" :key="index">
          <Swiper type='bullets' v-if="item.type == 'swiperList'" imgUrl='https://img.tea7.com/0173663_0.jpeg?x-oss-process=image/resize,w_720' ></Swiper>
          <Icons v-if="item.type == 'iconsList'"></Icons>

          <Recommend v-if="item.type == 'recommendList'"></Recommend>

          <Jjm v-if="item.type == 'gb'"></Jjm>

          <Like v-if="item.type == 'like'" :likeData='likeData' ></Like>
          
        </div>
      </div>
    </div>
    <div class="bottom">
      <tarbar></tarbar>
    </div>
  </div>
</template>

<script>
import tarbar from "@/components/common/tarbar";
import Header from "@/components/home/Header";
import Swiper from "@/components/home/swiper";
import Icons from "@/components/home/Icons";
import Recommend from "@/components/home/Recommend";

import BetterScroll from "better-scroll";
import Like from "@/components/home/Like";
import Jjm from "@/components/home/Jjm";
import axios from "axios";

export default {
  data() {
    return {
      a: 1,
      tarbar: [],
      newData: [],
      goodsData:[],
      likeData:[]
    };
  },
  components: {
    tarbar,
    Header,
    Swiper,
    Icons,
    Recommend,

    Like,
    Jjm,
  },
  mounted() {
    
  },
  created() {
    this.getHomeData();
   
  },
  methods: {
    changeNewData(res) {
      this.newData = res;
      
 
      
    },

    getHomeData() {
      axios({
        url: "/api/index_list/0/data/1",
      }).then((res) => {
        this.tarbar = res.data.data.tarBar;
        this.newData = res.data.data.data;
        
        this.newData.forEach(item=>{
          if(item.type=='like'){
            this.likeData=item
          }
        })    
      });
    },
  },
  watch:{
    newData(){
       // 数据渲染完毕在生成betterScroll实例
        this.$nextTick(() => {
          new BetterScroll(this.$refs.wrapper, {
            //x轴偏移量
            startX: 1,
            click:true,
            scrollX:false,
            movable: true,
            zoom: true,
          });
        });
      
    }
  },
  computed:{

  
  }
};
</script>

<style scoped lang='scss'>
.home {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  .top {
  }
  .meddle {
    flex: 1;
    overflow: hidden;
  }
}
</style>